<template>
  <div>
    <el-card style="">
      <div style="display: flex;justify-content: space-between;">
          <div style="font-size: 24px;font-weight: bold;">新闻动态管理</div>
          <div><el-button type="primary" @click="dialog_add = true">+ 添加</el-button></div>
      </div>
      <div style="margin-top: 30px;">
          <el-table :data="dataList" style="width: 100%">
            <el-table-column type="index" width="60" label="序号" align="center" />
            <el-table-column prop="newsTitle" label="新闻标题" align="center" />
            <el-table-column prop="address" label="缩略图" align="center">
              <template #default="scope">
                <el-image style="width: 100px; height: 60px" :src="baseURL_dev+scope.row.newsImageUrl" fit="contain"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="上传日期" align="center" />
            <el-table-column prop="address" label="发布者" align="center" />
            <el-table-column prop="address" label="操作" align="center">
              <template #default="scope">
                  <el-button link type="primary" size="small" @click="del(scope.row)">
                      <el-icon :size="16"><Delete /></el-icon>
                  </el-button>
                  <el-button link type="primary" size="small" @click="edit(scope.row)">
                      <el-icon :size="16"><Edit /></el-icon>
                  </el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>
      <div style="margin-top: 20px;display: flex;justify-content: space-between;">
            <div></div>
            <el-pagination
              v-model:current-page="currentPage4"
              v-model:page-size="user.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="user.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
    </el-card>

    <el-dialog v-model="dialog_add" title="新增" width="800">
      <div>
        <div style="margin-left: 30px;display: flex;align-items: center;">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            主标题
          </div>
          <el-input v-model="addForm.newsTitle" style="width: 240px;border-radius: 0" placeholder=""></el-input>
        </div>
        <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            副标题
          </div>
          <el-input v-model="addForm.newsTitleVice" style="width: 240px;border-radius: 0" placeholder=""></el-input>
        </div>
        <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            图片
          </div>
          <div>
              <el-upload
                class="avatar-uploader"
                :action="baseURL_dev+'/common/upload'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="addForm.newsImageUrl" :src="baseURL_dev+addForm.newsImageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
          </div>
        </div>
        <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            新闻详情
          </div>
          <div style="border: 1px solid #ccc;flex: 1;">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="addorRef"
              mode="default"
            />
            <Editor
              style="height: 300px; overflow-y: hidden;"
              v-model="addForm.newsDetails"
              :defaultConfig="addorConfig"
              mode="default"
              @onCreated="handleCreated1"
            />
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog_add = false">取消</el-button>
          <el-button type="primary" @click="addUser()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialog_edit" title="新增" width="800">
      <div>
        <div style="margin-left: 30px;display: flex;align-items: center;">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            主标题
          </div>
          <el-input v-model="editForm.newsTitle" style="width: 240px;border-radius: 0" placeholder=""></el-input>
        </div>
        <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            副标题
          </div>
          <el-input v-model="editForm.newsTitleVice" style="width: 240px;border-radius: 0" placeholder=""></el-input>
        </div>
        <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            图片
          </div>
          <div>
              <el-upload
                class="avatar-uploader"
                :action="baseURL_dev+'/common/upload'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess2"
              >
                <img v-if="editForm.newsImageUrl" :src="baseURL_dev+editForm.newsImageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
          </div>
        </div>
        <div style="margin-left: 30px;display: flex;align-items: center;margin-top: 20px">
          <div style="margin-right: 10px;font-size: 14px;width: 80px;">
            案例详情
          </div>
          <div style="border: 1px solid #ccc;flex: 1;">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              mode="default"
            />
            <Editor
              style="height: 300px; overflow-y: hidden;"
              v-model="editForm.newsDetails"
              :defaultConfig="addorConfig"
              mode="default"
              @onCreated="handleCreated2"
            />
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog_edit = false">取消</el-button>
          <el-button type="primary" @click="editUser()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup lang="ts">
    import '@wangeditor/editor/dist/css/style.css' // 引入 css
    import { baseURL_dev } from '../../config/baseUrl'
    import { onBeforeUnmount, shallowRef,onMounted,ref } from 'vue'
    import { ElMessage, ElMessageBox,ElNotification } from 'element-plus'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import { Plus } from '@element-plus/icons-vue'
    import type { UploadProps } from 'element-plus'
    import { $NewsManageList,$NewsManageAdd,$NewsManageEdit,$NewsManageDel } from '../../api/content'

    onMounted(()=>{
      loadList()
    })

    let dataList = ref([])
    let form = ref({})
    form.caseName = ''
    form.pageNum = 1,
    form.pageSize = 10

    let dialog_add = ref(false)
    let dialog_edit = ref(false)
    let addForm = ref({})
    let editForm = ref({})

    let user = ref('')
    const currentPage4 = ref(1)
    const small = ref(false)
    const disabled = ref(false)
    const background = ref(false)

    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`)
      form.value.pageSize = val
      loadList()
    }
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`)
      form.value.pageNum = val
      loadList()
    }
    
    const loadList = async ()=>{
      console.log(form.value)
      let ret = await $NewsManageList(form.value)
      console.log(ret)
      user.value = ret
      dataList.value = ret.rows
    }

    const addUser = async ()=>{
      let res = ref({})
      res = await $NewsManageAdd(addForm.value)
      console.log('res',res)
      if(res.code==0){
        loadList()
        dialog_add.value = false
      }
    }

    const del = async (row)=>{
      console.log(row)
      ElMessageBox.confirm(
        '您确定要删除这条数据吗？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(async() => {
          let del = {}
          del.newsIds = row.newsId
          console.log('del',del)
          let res = ref({})
          res = await $NewsManageDel(del)
          console.log('res',res)
          if(res.code==0){
            // ElNotification({
            //     title:'通知',
            //     message: res.message,
            //     type:'success'
            // })
            loadList()
          }
        })
        .catch(() => {
        })
    }

    const editUser = async ()=>{
      let res = ref({})
      res = await $NewsManageEdit(editForm.value)
      console.log('res',res)
      if(res.code==0){
        loadList()
        dialog_edit.value = false
      }
    }

    const edit = async (row)=>{
      console.log(row)
      editForm.value = row
      dialog_edit.value = true
    }

    const handleAvatarSuccess: UploadProps['onSuccess'] = (
      response,
      uploadFile
    ) => {
      // console.log(baseURL_dev)
      console.log('response',response)
      console.log('uploadFile',uploadFile)
      addForm.value.newsImageUrl = response.fileName
    }

    const handleAvatarSuccess2: UploadProps['onSuccess'] = (
      response,
      uploadFile
    ) => {
      editForm.value.newsImageUrl = response.fileName
    }

    const addorRef = shallowRef()
    const addorConfig = { placeholder: '请输入内容...' }
    const handleCreated1 = (editor) => {
      addorRef.value = editor // 记录 editor 实例，重要！
    }

    const editorRef = shallowRef()
    const editorConfig = { placeholder: '请输入内容...' }
    const handleCreated2 = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

  </script>
  
  <style scoped lang="less">
  .avatar-uploader .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
  }
</style>